<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>角色管理</title>
  <style>
    /* 简单的样式美化 */
    .search-box { margin: 20px 0; }
    table { width: 100%; border-collapse: collapse; margin-top: 10px; }
    th, td { padding: 8px 12px; text-align: left; border: 1px solid #ddd; }
    .pagination { margin-top: 20px; }
    .pagination button { margin: 0 5px; }
  </style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="search-box">
  <input type="text" id="roleName" placeholder="输入角色名称查询">
  <button onclick="searchRole()">查询</button>
  <button onclick="addRole()" style="float:right;">新增</button>
</div>

<table id="roleTable">
  <thead>
  <tr>
    <th>序号</th>
    <th>角色名称</th>
    <th>描述</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>
  <!-- 数据行将通过JavaScript动态插入 -->
  </tbody>
</table>

<div class="pagination">
  <button onclick="changePage('prev')">上一页</button>
  <span id="pageInfo"></span>
  <button onclick="changePage('next')">下一页</button>
</div>

<script>
  var currentPage = 1;
  var pageSize = 10;

  function searchRole() {
    currentPage = 1; // 搜索时重置到第一页
    loadRoles();
  }

  function addRole() {
    alert("跳转到新增角色页面");
    // 实现跳转逻辑或弹出表单
  }

  function changePage(direction) {
    if (direction === 'next') {
      currentPage++;
    } else if (direction === 'prev' && currentPage > 1) {
      currentPage--;
    }
    loadRoles();
  }

  function loadRoles() {
    var roleName = $('#roleName').val();
    $.ajax({
      url: '/pageRole', // 替换为你的后台接口地址
      method: 'GET',
      data: {
        roleName: roleName,
        current: currentPage,
        size: pageSize
      },
      success: function(response) {
        var roles = response.data;
        var content = '';
        roles.forEach(function(role, index){
          content += '<tr>';
          content += '<td>' + role.roleId + '</td>';
          content += '<td>' + role.roleName + '</td>';
          content += '<td>' + role.description + '</td>';
          content += '<td><button onclick="editRole(\'' + role.roleId + '\')">编辑</button> <button onclick="deleteRole(\'' + role.roleId + '\')">删除</button></td>';
          content += '</tr>';
        });
        $('#roleTable tbody').html(content);
        $('#pageInfo').text('当前页：' + currentPage);
      }
    });
  }

  function editRole(roleId) {
    alert("编辑角色ID：" + roleId);
    // 编辑逻辑
  }

  function deleteRole(roleId) {
    if(confirm("确定要删除该角色吗？")) {
      alert("执行删除操作，角色ID：" + roleId);
      // 删除逻辑
    }
  }

  // 页面加载时自动加载角色列表
  $(document).ready(function(){
    content += '<td>'+
            '<button onclick="editRole(\'' + role.roleId + '\')">编辑</button> ' +
            '<button onclick="deleteRole(\'' + role.roleId + '\')">删除</button> ' +
            '<button onclick="openMenuAssign(\'' + role.roleId + '\')">菜单管理</button>' +
            '</td>';
  });
</script>
<!-- 菜单分配模态框 -->
<div id="menuAssignModal" style="display:none; position:fixed; top:20%; left:30%; width:50%; padding:20px; background:#fff; border:1px solid #ccc; z-index:999;">
  <h3>分配菜单</h3>
  <div id="menuTreeContainer"></div>
  <div style="margin-top:15px;">
    <button onclick="saveAssignedMenus()">确定</button>
    <button onclick="$('#menuAssignModal').hide();">取消</button>
  </div>
</div>
</body>
</html>